<template>
    <div class="project">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('/index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem>财务管理</BreadcrumbItem>
          <BreadcrumbItem>项目管理</BreadcrumbItem>
        </Breadcrumb>
        <Content id="tal" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="f-header" ghost>
            <div class="f-header-search">
              <span>搜索条件：</span>
              <Input v-model="search" placeholder="请输入项目名称..." style="width: 300px"></Input>
              <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            </div>
            <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
            <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
            <Button type="primary" @click="toDown"><Icon type="md-download" />导出</Button>
          </div>
          <div class="f-content" style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
            <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
              <Table :columns="tb_columns"  :height="666" :data="project_list" size="small"  ref="table">
                <template slot-scope="{ row }" slot="projectStatus">
                  <span v-if="row.status==='进行中'" class="status-error">进行中</span>
                  <span v-else class="status-success">完结</span>
                </template>
              </Table>
              <Page :total="project_total" :current="project_current_page" :page-size="project_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
            </div>
          </div>
        </Content>
      </Layout>
      <Drawer title="新增项目" :closable="false" v-model="addDrawer" width="40" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="合同编号：" prop="contractNo">
            <Input v-model="addForm.contractNo" placeholder="请输入合同编号..."></Input>
          </FormItem>
          <FormItem label="项目名称：" prop="projectName">
            <Input v-model="addForm.projectName" placeholder="请输入项目名称..."></Input>
          </FormItem>
          <FormItem label="项目时间：">
            <DatePicker v-model="addForm.projectDate" type="date" placeholder="请选择项目时间..." style="width:100%"></DatePicker>
          </FormItem>
          <FormItem label="项目地址：" prop="projectAddress">
            <Input v-model="addForm.projectAddress"   placeholder="请输入项目地址..."></Input>
          </FormItem>
          <FormItem label="合作方公司名称：" prop="companyName">
            <Input v-model="addForm.companyName" placeholder="请输入合作方公司名称..."></Input>
          </FormItem>
          <FormItem label="项目标价：" prop="price">
            <Input v-model="addForm.price" placeholder="请输入项目标价..."></Input>
          </FormItem>
          <FormItem label="项目预计支出：" prop="estimatedExpenses">
            <Input v-model="addForm.estimatedExpenses" placeholder="请输入项目预计支出..."></Input>
          </FormItem>
          <FormItem label="项目说明："  >
            <Input v-model="addForm.projectDesc"  type="textarea" :rows="6"  placeholder="请输入项目说明..."></Input>
          </FormItem>
          <FormItem label="项目图片：" >
            <Upload
              multiple
              type="drag"
              action="/">
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击此处或拖拽文件至此进行上传</p>
              </div>
            </Upload>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
      <Drawer title="修改项目" :closable="false" v-model="updateDrawer" width="40" :mask-closable="false">
        <Form ref="updateForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="合同编号：" prop="contractNo">
            <Input v-model="addForm.contractNo" placeholder="请输入合同编号..."></Input>
          </FormItem>
          <FormItem label="项目名称：" prop="projectName">
            <Input v-model="addForm.projectName" placeholder="请输入项目名称..."></Input>
          </FormItem>
          <FormItem label="项目时间：" prop="projectDate">
            <DatePicker v-model="addForm.projectDate" type="date" placeholder="请选择项目时间..." style="width:100%"></DatePicker>
          </FormItem>
          <FormItem label="项目地址：" prop="projectAddress">
            <Input v-model="addForm.projectAddress"   placeholder="请输入项目地址..."></Input>
          </FormItem>
          <FormItem label="合作方公司名称：" prop="companyName">
            <Input v-model="addForm.companyName" placeholder="请输入合作方公司名称..."></Input>
          </FormItem>
          <FormItem label="项目标价：" prop="price">
            <Input v-model="addForm.price" placeholder="请输入项目标价..."></Input>
          </FormItem>
          <FormItem label="项目预计支出：" prop="estimatedExpenses">
            <Input v-model="addForm.estimatedExpenses" placeholder="请输入项目预计支出..."></Input>
          </FormItem>
          <FormItem label="项目说明：">
            <Input v-model="addForm.projectDesc"  type="textarea" :rows="6"  placeholder="请输入项目说明..."></Input>
          </FormItem>
          <FormItem label="项目图片：" >
            <Upload
              multiple
              type="drag"
              action="/">
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击此处或拖拽文件至此进行上传</p>
              </div>
            </Upload>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit2('updateForm')">提交</Button>
          <Button @click="handleReset('updateForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
      <Drawer title="核算项目" :closable="false" v-model="accountDrawer" width="40" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="合同编号：">
            <Input v-model="addForm.contractNo" disabled placeholder="请输入合同编号..."></Input>
          </FormItem>
          <FormItem label="项目名称：">
            <Input v-model="addForm.projectName" disabled placeholder="请输入项目名称..."></Input>
          </FormItem>
          <FormItem label="项目时间：">
            <DatePicker v-model="addForm.projectDate" disabled type="date" placeholder="请选择项目时间..." style="width:100%"></DatePicker>
          </FormItem>
          <FormItem label="项目地址：" >
            <Input v-model="addForm.projectAddress" disabled placeholder="请输入项目地址..."></Input>
          </FormItem>
          <FormItem label="合作方公司名称：" >
            <Input v-model="addForm.companyName" disabled placeholder="请输入合作方公司名称..."></Input>
          </FormItem>
          <FormItem label="项目标价：">
            <Input v-model="addForm.price" disabled placeholder="请输入项目标价..."></Input>
          </FormItem>
          <FormItem label="项目预计支出：">
            <Input v-model="addForm.estimatedExpenses" disabled placeholder="请输入项目预计支出..."></Input>
          </FormItem>
          <FormItem label="项目说明：" >
            <Input v-model="addForm.projectDesc" disabled  type="textarea" :rows="6"  placeholder="请输入项目说明..."></Input>
          </FormItem>
          <FormItem label="项目总支出：" prop="totalExpenses">
            <Input v-model="addForm.totalExpenses" placeholder="请输入项目总支出..."></Input>
          </FormItem>
          <FormItem label="项目支出说明：" prop="expensesDesc">
            <Input v-model="addForm.expensesDesc"  type="textarea" :rows="6"  placeholder="请输入项目支出说明..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit3('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
  import expandRow from './project-expand.vue';
    export default {
      components: { expandRow },
        name: "project",
      data() {
        return {
          search:'',
          loading:false,
          addForm:{},
          accountDrawer:false,
          addDrawer:false,
          updateDrawer:false,
          addRuleVal:{
            contractNo: [
              { required: true, message: '请输入合同编号', trigger: 'blur' }
            ],
            projectName: [
              { required: true, message: '请输入项目名称', trigger: 'blur' }
            ],
            projectAddress: [
              { required: true, message: '请输入项目地址', trigger: 'blur' }
            ],
            companyName: [
              { required: true, message: '请输入合作方公司名称', trigger: 'blur' }
            ],
            price: [
              { required: true, message: '请输入项目标价', trigger: 'blur' }
            ],
            estimatedExpenses: [
              { required: true, message: '请输入项目预计支出', trigger: 'blur' }
            ],
          },
          tb_columns: [
            {
              type: 'expand',
              width: 50,
              render: (h, params) => {
                return h(expandRow, {
                  props: {
                    row: params.row
                  }
                })
              }
            },
            {
              title: '项目名称',
              key: 'projectName',
              align: 'center'
            },
            {
              title: '项目地址',
              key: 'projectAddress',
              align: 'center'
            },
            {
              title: '合作方公司名称',
              key: 'companyName',
              align: 'center'
            },
            {
              title: '项目情况',
              slot: 'projectStatus',
              align: 'center'
            },
            {
              title: '项目标价',
              key: 'price',
              align: 'center'
            },
            {
              title: '项目预计支出',
              key: 'estimatedExpenses',
              align: 'center'
            },
            {
              title: '项目总支出',
              key: 'totalExpenses',
              align: 'center'
            },
            {
              title: '项目核算人',
              key: 'accountant',
              align: 'center'
            },
            {
              title: '操作',
              align: 'center',
              render: (h, params) => {
                if(params.row.status==='进行中'){
                  return h('div', [
                    h('Button', {
                      props: {
                        icon: 'md-create',
                        size: 'small'
                      },
                      style: {
                        color: 'black',
                      },
                      on: {
                        click: () => {
                          this.toUpdate(params.row.id)
                        }
                      }
                    }),
                    h('Button', {
                      props: {
                        icon: 'ios-cloud-upload',
                        size: 'small'
                      },
                      style: {
                        color: 'black',
                      },
                      on: {
                        click: () => {
                          this.toAccount(params.row.id)
                        }
                      }
                    }),
                    h('Button', {
                      props: {
                        icon: 'md-trash',
                        size: 'small'
                      },
                      style: {
                        color: 'black',
                      },
                      on: {
                        click: () => {
                          this.toDel(params.row.id)
                        }
                      }
                    })
                  ]);
                }else{
                  return h('div', [
                    h('Button', {
                      props: {
                        icon: 'md-trash',
                        size: 'small'
                      },
                      style: {
                        color: 'black',
                      },
                      on: {
                        click: () => {
                          this.toDel(params.row.id)
                        }
                      }
                    })
                  ]);
                }
              }
            }
          ],
        }
      },
      computed: {
        ...mapGetters(['project_list','project_total','project_current_page','project_page_size']),
      },
      methods: {
        ...mapActions(['getProjectList']),
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.loading=true;
              let params = {
                contractNo:this.addForm.contractNo,
                projectName:this.addForm.projectName,
                projectDate:this.addForm.projectDate,
                projectAddress:this.addForm.projectAddress,
                companyName:this.addForm.companyName,
                price:this.addForm.price,
                estimatedExpenses:this.addForm.estimatedExpenses,
                projectDesc:this.addForm.projectDesc,
              };
              toPost('/finance-management/finance/project/add',params)
                .then(res=>{
                  if (res.resultCode === 0) {
                    this.$Notice.success({
                      title: '新增项目成功'
                    });
                    this.$refs[name].resetFields();
                    this.toRefresh();
                    this.addDrawer=false;
                  }else{
                    this.$Notice.error({
                      title: '新增项目失败',
                      desc: '服务器发生未知错误'
                    })
                  }
                  this.loading=false;
                });
            }
          })
        },
        handleSubmit2 (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.loading=true;
              let params = {
                id:this.addForm.id,
                contractNo:this.addForm.contractNo,
                projectName:this.addForm.projectName,
                projectDate:this.addForm.projectDate,
                projectAddress:this.addForm.projectAddress,
                companyName:this.addForm.companyName,
                price:this.addForm.price,
                estimatedExpenses:this.addForm.estimatedExpenses,
                projectDesc:this.addForm.projectDesc,
              };
              toPost('/finance-management/finance/project/update',params)
                .then(res=>{
                  if (res.resultCode === 0) {
                    this.$Notice.success({
                      title: '修改成功'
                    });
                    this.$refs[name].resetFields();
                    this.toRefresh();
                    this.updateDrawer=false;
                  }else{
                    this.$Notice.error({
                      title: '修改失败',
                      desc: '服务器发生未知错误'
                    })
                  }
                });
              this.loading=false;
            }
          })
        },
        handleSubmit3 (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.loading=true;
              let params = {
                id:this.addForm.id,
                totalExpenses:this.addForm.totalExpenses,
                expensesDesc:this.addForm.expensesDesc,
                accountantId:localStorage.getItem("userId"),
                accountant:localStorage.getItem("nickname"),
              };
              toPost('/finance-management/finance/project/account',params)
                .then(res=>{
                  if (res.resultCode === 0) {
                    this.$Notice.success({
                      title: '项目核算成功'
                    });
                    this.$refs[name].resetFields();
                    this.toRefresh();
                    this.accountDrawer=false;
                  }else{
                    this.$Notice.error({
                      title: '项目核算失败',
                      desc: '服务器发生未知错误'
                    })
                  }
                });
              this.loading=false;
            }
          })
        },
        handleReset (name) {
          this.addDrawer=false;
          this.updateDrawer=false;
          this.accountDrawer=false;
          this.$refs[name].resetFields();
        },
        toDown(){
          swal({
            title: "您确认导出项目表数据吗？",
            icon: "info",
            buttons: ["取消", "确认下载"],
          })
            .then((willDown) => {
              if (willDown) {
                if(this.project_list.length>0){
                  this.$refs.table.exportCsv({
                    filename: '项目表('+this.formatDate(new Date().toDateString())+')'
                  });
                }else{
                  swal("无法导出!", "表格暂无数据!", "error");
                }
              }
            });
        },
        onChange(currentPage){
          this.getProjectList({
            'search':this.search,
            'currentPage':currentPage*1,
            'pageSize':this.project_page_size
          });
        },
        toRefresh(){
          this.getProjectList({
            'search':this.search,
            'currentPage':this.project_current_page,
            'pageSize':this.project_page_size
          });
        },
        jump(e){
          this.$router.push(e);
        },
        toAccount(id){
          toGet('/finance-management/finance/project/queryOne/'+id)
            .then(res=>{
              if (res.resultCode === 0) {
                this.addForm=res.data;
                this.accountDrawer=true;
              }else{
                this.$Notice.warning({
                  title: '获取信息失败',
                  desc: '服务器发生未知错误'
                });
              }
            });
        },
        toUpdate(id){
          toGet('/finance-management/finance/project/queryOne/'+id)
            .then(res=>{
              if (res.resultCode === 0) {
                this.addForm=res.data;
                this.updateDrawer=true;
              }else{
                this.$Notice.warning({
                  title: '获取信息失败',
                  desc: '服务器发生未知错误'
                });
              }
            });
        },
        toDel(id){
          swal({
            title: "您确定删除该项目吗?",
            text: "删除该项目后，系统将删除该项目的所有信息!",
            icon: "warning",
            buttons: ["容我再想想!", "确认删除!"],
            dangerMode: true,
          })
            .then((willDelete) => {
              if (willDelete) {
                toGet('/finance-management/finance/project/delete/'+id)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      swal("删除成功!", {
                        icon: "success",
                      });
                      this.toRefresh();
                    }
                  })
                  .catch(error=>{
                    swal("删除失败!", {
                      icon: "error",
                    });
                  });
              }
            });
        },
        onPageSizeChange(pageSize){
          this.getProjectList({
            'search':this.search,
            'currentPage':this.project_current_page,
            'pageSize':pageSize*1
          });
        },
        toSearch(){
          this.getProjectList({
            'search':this.search,
            'currentPage':this.project_current_page,
            'pageSize':this.project_page_size
          });
        },
        formatDate(date){
          if(date){
            let time = new Date(date);
            return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
          }else{
            return '';
          }
        }
      },
      mounted() {
        this.getProjectList({
          'search':this.search,
          'currentPage':1,
          'pageSize':10
        });
      },
    }
</script>

<style lang="css" scoped>
  .demo-drawer-footer{
    width: 100%;
    position: relative;
    bottom: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
